<template>
    <view>
        <!--搜索框-->
        <u-search placeholder="请输入搜索关键字..." v-model="keyword" v-if="has_search" @search="toSearch" @custom="toSearch" shape="square" :clearabled="true" :show-action="true" :animation="true" bgColor="#f0f0f0" margin="15rpx 25rpx 2rpx"></u-search>

        <!--mescroll-uni-->
        <mescroll-uni :ref="'mescrollRef'+i" @init="mescrollInit" :bottom="has_search==true?80:0" :height="height" :disable-scroll="disableScroll" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick">
            <!-- 列表数据 -->
            <me-list :list="list" :tabindex="tabs[i].tabId" @refreshTab="refreshTab"></me-list>
        </mescroll-uni>
    </view>
</template>

<script>
/**
 * 1、使用方法指引：
 *    1.1、设置api路径：api_url
 *    1.2、列表数据循环元素体：${swiper}/me-list.vue
 *    1.3、upCallback(){...}函数下的代码需要做检查，确认是否需要做调整
 *    注：列表为空的异常：如果api返回的数组的key不是0,1,2...这种序号的会无法正常显示，解决办法是在php端：$result=array_values($result);//将数组的键值key全部替换成数字0开头的数组
 * 2、参考 & 备注
 *    1、官网文档：https://www.mescroll.com/uni.html
 *    2、mescroll插件市场来源：https://ext.dcloud.net.cn/plugin?id=343
 *    3、注：一个.vue文件只能存在一个mescroll组件, 如果要多mescroll组件, 需分别封装到子组件中，如: tab切换, 页面存在多个mescroll组件, 那么请严格参考mescroll-swiper.vue 示例的写法，即需要swiper.vue 》 swiper/item.vue 》 swiper/me-list.vue
 */
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mixins/mescroll-more-item.js";
//数据列表子组件
import MeList from "./me-list.vue";

export default {
    //注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
    mixins: [MescrollMixin,MescrollMoreItemMixin],
    components: {
        //注册组件：数据列表子组件
        MeList
    },
    data() {
        return {
            //下拉时的配置参数
            downOption:{
                //不自动加载 (mixin已处理第一个tab触发downCallback)
                auto:false,
                //加载动画离顶部的距离
                offset:60
            },
            //上拉时的配置参数
            upOption:{
                //不自动加载
                auto:false,
                page: {
                 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                 	size: 10 // 每页数据的数量
                },
                //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据)，显示无更多数据会不好看; 默认5
                noMoreSize: 5,
                //为空时的设置
                empty:{
                    //空布局的图标路径 (支持网络路径)
                    //icon: 'https://cdn.uviewui.com/uview/empty/search.png',
                    //提示文字
                    tip: '~ 空空如也 ~',
                    //按钮文字 (为空则表示不要按钮)
                    btnText: '去看看'
                }
            },
            //列表数据
            list: [],
            //搜索关键字
            keyword: '',
            //是否开启列表搜索功能(如不需要搜索框功能则设置为false即可)
            has_search: true
        }
    },
    props:{
        //每个tab页的专属下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
        i: Number,
        //当前tab的下标 (除了支付宝小程序必须在这里定义, 其他平台都可不用写, 因为已在MescrollMoreItemMixin定义)
        index: {
            type: Number,
            default(){
                return 0
            }
        },
        //为了请求数据,演示用,可根据自己的项目判断是否要传
        tabs: {
            type: Array,
            default(){
                return []
            }
        },
        //设置列表api路径
        api_url: String,
        //mescroll的高度
        height: [Number,String],
        //是否禁止滚动, 默认false:不禁用
        disableScroll: Boolean
    },
    methods: {
        /**
         * 下拉刷新的回调
         */
        downCallback() {
            //下拉刷新时清除搜索关键字
            this.keyword = '';
            //滚动条位置归位到顶部
            this.mescroll.scrollTo(0,0)
            // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
            this.mescroll.resetUpScroll()
        },
        /**
         * 上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10
         */
        upCallback(page) {
        	self = this;
            //获取api数据
            this.ajax({
                url: this.api_url,
                data:{
                    page: page.num, //第几页
                    pagesize: page.size, //每页第数
                    tabId: this.tabs[this.i].tabId, //当前为第几个tab
                    keyword: this.keyword
                }
            }).then(res => {
            	//如果res.list不是object则赋值为空对象[]
                let result = (typeof(res.data.list)=='object')?res.data.list:[];
                let result_length = result.length;
                //如果是第一页，则将列表数据清空
                if(page.num == 1)
                    this.list = [];
	            //数据去重：防止最近产生的新数据导致有重复数据
	            result = self.$my.filterSame(result, self.list);
                //设置列表数据
                this.list = this.list.concat(result); //追加新数据
                //api获取成功，隐藏下拉刷新和上拉加载的状态（延时0.3秒再关闭加载动画，视觉效果更踏实）
                //特别注意: 这里加setimeout延时可能会导致mescroll-more插件 (快速上滑加载分页会异常中断)
                setTimeout(() => {
                    this.mescroll.endSuccess(result_length);
                },10);
            }).catch(()=>{
                //联网失败, 结束加载
                this.mescroll.endErr();
            });
        },
        /**
         * 点击空布局按钮的回调
         */
        emptyClick(){
            this.toast('点击了按钮,具体逻辑自行实现');
        },
        /**
         * 刷新当前tab
         * 注1：子组件调用刷新：this.$emit('refreshTab');
         * 注2：父页面调用刷新：that.$refs.mescrollItem[that.tabIndex].refreshTab();【需要指定tabindex的值】
         * 注3：其他页面调用刷新：uni.$emit('refreshTabs');
         */
        refreshTab() {
            //下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
            this.downCallback()
        },
        /**
         * 搜索关键字
         */
        toSearch() {
            //过滤关键词两边空白
            this.keyword = this.$my.trim(this.keyword)
            //刷新：重新加载数据
            this.mescroll.resetUpScroll()
        }

    }
}
</script>